<template>
  <view class="activity-section">
    <view class="section-title">
      <text class="title">New.</text>
      <text class="subtitle">平台活动</text>
    </view>
    <view class="activity-grid">
      <view class="grid-item large"></view>
      <view class="grid-container">
        <view class="grid-item small"></view>
        <view class="grid-item small"></view>
      </view>
    </view>
  </view>
</template>

<script>
export default {
  name: 'ActivitySection'
}
</script>

<style lang="scss" scoped>
.activity-section {
  padding: 20rpx;
  .section-title {
    margin-bottom: 20rpx;
    .title {
      font-size: 36rpx;
      font-weight: bold;
      margin-right: 10rpx;
    }
    .subtitle {
      font-size: 28rpx;
      color: #666;
    }
  }
  .activity-grid {
    display: flex;
    gap: 20rpx;
    .grid-item {
      background: #ff6634;
      border-radius: 12rpx;
      &.large {
        width: 400rpx;
        height: 400rpx;
      }
      &.small {
        width: 290rpx;
        height: 190rpx;
        margin-bottom: 20rpx;
      }
    }
    .grid-container {
      display: flex;
      flex-direction: column;
    }
  }
}
</style> 